<!--  -->
<template>
  <div class="">
    <el-dialog
      title="明细"
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="header_title">
        <div>退款编号：{{ info.orderNumber }}</div>
        <div>退款状态：{{ backStatus[info.refundStatus] }}</div>
      </div>
      <div class="box-container">
        <div class="box-title">退款信息</div>
        <div class="box-th-container">
          <span class="box-th-item"
            >费用类型：{{ backType[info.refundType] }}</span
          >
          <span class="box-th-item red"
            >退款金额(元)：{{ info.realAmount }}元</span
          >
          <span class="box-th-item">收据票号：-</span>
          <span class="box-th-item"
            >申请退款原因：{{ info.applyRefundReasons }}</span
          >
          <span class="box-th-item">申请退款时间：{{ info.createDate }}</span>
        </div>
      </div>
      <div class="box-container">
        <div class="box-title">原订单信息</div>
        <div class="common-title">
          <div class="common-left">
            <span class="common-sn"
              >订单编号：{{ weborderData.orderNumber }}</span
            ><span>支付时间：{{ weborderData.payDate }}</span>
          </div>
          <span class="red"
            >订单金额(元)：{{ weborderData.orderAmount }}元</span
          >
        </div>
      </div>
      <div class="box-container">
        <div class="box-title bold">租赁公司信息</div>
        <div class="box-th-container">
          <span class="box-th-item">公司名称：{{ authInfo.companyName }}</span>
          <span class="box-th-item">联系人：{{ authInfo.contactName }}</span>
          <span class="box-th-item">联系方式：{{ authInfo.contactPhone }}</span>
          <span class="box-th-item">营业执照：{{ authInfo.companyCode }}</span>
          <span class="box-th-item">法人：{{ authInfo.legalIdName }}</span>
          <span class="box-th-item"
            >法人联系方式：{{ authInfo.legalPhone }}</span
          >
        </div>
      </div>
      <div class="box-container b-b">
        <div class="box-title bold">租赁费用信息</div>
        <div class="main-title-box">
          <div class="mian-title w50">房屋基础信息</div>
          <div class="mian-title w50 b-r">
            <div class="title-left">
              租金<span class="main-tag">免延1个月</span>
            </div>
            <div class="title-right">
              小计:<span class="red">{{ weborderData.rentAmount }} 元</span>
            </div>
          </div>
        </div>
        <div class="main-container">
          <div
            style="
              flex-direction: row;
              height: 470px;
              width: 50%;
              overflow-y: auto;
              border: 1px solid #e1e1e1;
            "
            v-if="this.weborderData.serviceType == 1"
          >
            <div
              class="container-item w50"
              v-for="item in autofo"
              :key="item.id"
              style="padding: 20px; border: 1px solid #e1e1e1; width: 100%"
            >
              <div class="main-container-box">
                <p>
                  房屋区域 ： {{ item.projectRegionStage }}期
                  {{ item.projectRegionId }}区
                </p>
                <!-- <div>
                  <ul class="menu">
                    <li>序号</li>
                    <li>场地编号</li>
                    <li>面积(m)</li>
                    <li>租赁单价(价格/m.月)</li>
                  </ul>
                </div> -->
                <div style="width: 100%">
                  <table class="fangwu" style="width: 100%">
                    <tr class="aatr">
                      <td>序号</td>
                      <td>场地编号</td>
                      <td>面积(㎡)</td>
                      <td>租赁单价(价格/㎡.月)</td>
                    </tr>
                    <tr>
                      <td>{{ item.id }}</td>
                      <td>{{ item.projectName }}</td>
                      <td>{{ item.projectArea }}</td>
                      <td>{{ item.projectUnitPrice }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              flex-direction: row;
              height: 470px;
              width: 50%;
              overflow-y: auto;
              border: 1px solid #e1e1e1;
            "
            v-if="this.weborderData.serviceType == 2"
          >
            <div
              class="container-item w50"
              v-for="item in rejection"
              :key="item.id"
              style="padding: 20px; border: 1px solid #e1e1e1; width: 100%"
            >
              <div class="main-container-box">
                <span
                  class="mian-container-item"
                  v-if="item.buildingType == 'complex_building'"
                  >房屋类型：形象店</span
                >
                <span
                  class="mian-container-item"
                  v-else-if="item.buildingType == 'exhibition'"
                  >房屋类型：综合楼</span
                >
                <span class="mian-container-item" v-else>房屋类型：展场</span>
                <span class="mian-container-item"
                  >房屋编号：{{ item.projectNumber }}</span
                >
                <span class="mian-container-item"
                  >房屋区域：{{ item.projectRegionStage }}期
                  {{ item.projectRegionId }}号楼
                </span>
                <span class="mian-container-item"
                  >楼层：{{ item.projectFloorNumber }}层</span
                >
                <span class="mian-container-item"
                  >房号：{{ item.projectName }}</span
                >
                <span class="mian-container-item"
                  >房屋面积：{{ item.projectArea }}㎡</span
                >
                <span class="mian-container-item"
                  >租赁单价：{{ item.projectUnitPrice }}/㎡.月</span
                >
              </div>
            </div>
          </div>
          <div class="container-item w50 b-r1">
            <div class="main-container-box">
              <span class="mian-container-item"
                >租赁开始日期：{{ weborderData.rentStartTime }}</span
              >
              <span class="mian-container-item"
                >租赁月份：{{ weborderData.rentTime }}月</span
              >
              <span class="mian-container-item"
                >租赁起止时间：{{ weborderData.rentStartTime }}--{{
                  weborderData.rentEndTime
                }}</span
              >
              <span class="mian-container-item">租赁总面积:-</span>
              <span class="mian-container-item"
                >税金单价：{{
                  autofo[0] ? autofo[0].projectUnitPrice : ""
                }}元</span
              >
              <span class="mian-container-item"
                >税率：{{ autofo[0] ? autofo[0].rentTaxRate : "" }}%</span
              >
              <span class="mian-container-item"
                >收费期间：{{ weborderData.rentStartTime }}--{{
                  weborderData.feeEndTime
                }}</span
              >
              <span class="mian-container-item"
                >收费金额(元)：{{ weborderData.rentAmount }}元</span
              >
            </div>
            <div class="mian-title m-b">
              <div class="title-left">租赁保证金</div>
              <div class="title-right">
                小计:<span class="red"
                  >{{
                    weborderData.guaranteeAmount
                      ? weborderData.guaranteeAmount
                      : 0
                  }}
                  元</span
                >
              </div>
            </div>
            <div class="mian-title">
              <div class="title-left">市场管理服务费</div>
              <div class="title-right">
                小计:<span class="red">{{ weborderData.marketFee }} 元</span>
              </div>
            </div>
            <div class="main-container-box">
              <span class="mian-container-item"
                >市场管理服务费单价：{{
                  autofo[0] ? autofo[0].serviceUnitPrice : ""
                }}元/㎡.月</span
              >
              <span class="mian-container-item"
                >税率：{{ autofo[0] ? autofo[0].serviceTaxRate : "" }}%</span
              >
              <span class="mian-container-item"
                >收费起止时间：{{ weborderData.rentStartTime }}--{{
                  weborderData.feeEndTime
                }}</span
              >
              <span class="mian-container-item"
                >收费金额(元)：{{ weborderData.marketFee }}元</span
              >
            </div>
            <div class="mian-title">
              <div class="title-left">滞纳金</div>
            </div>
            <div class="main-container-box">
              <span class="mian-container-item"
                >滞纳金标准：应付未付金额*0.03%*延期天数</span
              >
              <span class="mian-container-item"
                >延期天数：{{
                  weborderData.delayDays ? weborderData.delayDays : 0
                }}天</span
              >
              <span class="mian-container-item"
                >收费金额(元)：{{
                  weborderData.lateFee ? weborderData.lateFee : 0
                }}元</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="end-content b-b">优惠活动：租期免费延长1个月</div>
      <div class="end-content" v-if="weborderData.paymentId == 1">
        支付方式：线上接口支付
      </div>
      <div class="end-content" v-else-if="weborderData.paymentId == 2">
        支付方式：线下支付
      </div>
      <div class="end-content" v-else>支付方式：其它</div>
      <span slot="footer" class="dialog-footer" v-if="info.refundStatus == 0">
        <el-button @click="access">审批通过</el-button>
        <el-button type="primary" @click="refuse">驳回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getDetail, weborder, weborderproject } from "@/api/cost/refundCost";
import { getDicType } from "@/api/common";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      dialogVisible: false,
      rejection: [1, 2, 3, 4, 5, 5],
      backType: [
        "",
        "租赁保证金",
        "装修保证金",
        "会议租赁保证金",
        "活动场地租赁保证金",
      ],
      backStatus: ["待审核", "退款中", "已退款", "已驳回"],
      houseType: ["", "形象店", "综合楼", "展场"],
      item: {},
      info: {},
      weborderData: {},
      authInfo: {},
      autofo: [],
      that: this,
      paymentOptions: [],
      paymentStatusOptions: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  filters: {
    isNotNull(value) {
      if (value) {
        return value;
      } else {
        return "/";
      }
    },
    paymentStatusFilter(value, that) {
      let str = "";
      that.paymentStatusOptions.forEach((item) => {
        if (item.value == value) {
          str = item.label;
        }
      });
      return str;
    },
    payTypeFilter(value, that) {
      let str = "";
      that.paymentOptions.forEach((item) => {
        if (item.value == value) {
          str = item.label;
        }
      });
      return str;
    },
  },
  // 方法集合
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    access() {
      let id = this.info.id;
      let gold = this.info;
      this.dialogVisible = false;
      this.$emit("checkStatus", "access", id, this.weborderData.orderAmount);
    },
    refuse() {
      let id = this.info.id;
      this.dialogVisible = false;
      this.$emit("checkStatus", "refuse", id);
    },
    init(id) {
      console.log(id);
      this.dialogVisible = true;
      getDetail(id).then((res) => {
        console.log(res);
        this.info = res.data.data;
        // ////////////////////////////////////////////// 临时更改接口数据
        // this.info.refundStatus = 0;
        // ////////////////////////////////////////////
      });
      this.autofo = [];
      weborder(id).then((res) => {
        console.log("数据");
        console.log(res);
        this.weborderData = res.data.data;
        this.authInfo = res.data.data.authInfo;

        weborderproject(id, this.weborderData.serviceType).then((res) => {
          console.log("数据2222");
          console.log(res);
          this.autofo = res.data.data;
        });
      });

      getDicType("payment_method").then((res) => {
        this.paymentOptions = res.data.data;
      });
      getDicType("payment_status").then((res) => {
        this.paymentStatusOptions = res.data.data;
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.m-b {
  margin-bottom: 4px;
}
.w50 {
  width: 50%;
}
.red {
  color: #f00;
}
.b-r {
  border-left: 1px solid #fff;
}
.b-r1 {
  border-left: 1px solid rgba(170, 170, 170, 0.3);
}
.b-b {
  border-bottom: 1px solid rgba(170, 170, 170, 0.3);
}
.end-content {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
.main-title-box {
  display: flex;
}
.main-container {
  display: flex;
}
.main-container-box {
  display: flex;
  flex-wrap: wrap;
  .mian-container-item {
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    width: 50%;
  }
}
.mian-title {
  padding: 0 10px;
  box-sizing: border-box;
  background-color: rgba(170, 170, 170, 0.3);
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #aaa;
  display: flex;
  justify-content: space-between;
  .main-tag {
    font-size: 12px;
    background-color: orangered;
    padding: 2px 4px;
    color: #fff;
    margin-left: 10px;
    border-radius: 2px;
  }
}
.box-title {
  height: 50px;
  line-height: 50px;
  background-color: rgba(215, 215, 215, 1);
  color: #7f7f7f;
  font-size: 16px;
  padding: 0 20px;
  font-weight: bold;

  &.bold {
    background-color: rgba(127, 127, 127, 1);
    color: #fff;
  }
}

.box-th-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: #aaa;
  .box-th-item {
    width: 33.3%;
    margin: 15px 0 10px;
    &.red {
      color: #f00;
    }
  }
}
.common-title {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 16px;
  .common-sn {
    margin-right: 30px;
    font-weight: bold;
  }
  .red {
    color: #f00;
  }
}
//@import url(); 引入公共css类
.itemAll {
  display: flex;
  flex-wrap: wrap;
  .items {
    width: 33%;
    padding: 10px 0px;
    display: flex;
    // align-items: center;
    span:first-child {
      width: 135px;
      text-align: right;
    }
    span:last-child {
      padding-left: 10px;
    }
  }
}
.bgc {
  background-color: aliceblue;
}
.header_title {
  margin-bottom: 15px;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  div {
    padding: 5px 20px;
    width: 30%;
  }
}
.urllist {
  display: flex;
  flex-wrap: wrap;
  .urlitem {
    padding: 0px 15px;
    img {
      width: 200px;
      height: 200px;
    }
  }
}
.editCar {
  margin-left: 10px;
  cursor: pointer;
}
.editCar:hover {
  color: blue;
}

.menu {
  width: 100%;
  margin-left: -100px;
}
.menu li {
  display: inline-block;
  width: 25%;
}
.fangwu {
  border: 1px solid #cccc;
  text-align: center;
}
.fangwu tr td {
  width: 120px;
  border: 1px solid #ccc;
}
.fangwu tr {
  height: 30px;
}
.aatr {
  border: 1px solid #cccc;
  background-color: #cccc;
}
</style>
